<template>
  <el-dropdown v-bind="$attrs" @command="clickDropDown">
    <span class="el-dropdown-link">
      {{title}}<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :class="{'active': data.currentValue === item[keyId]}" 
        :icon="data.currentValue === item[keyId] ? 'el-icon-check' : ''" 
        :command="item[keyId]" 
        v-for="item in listData" :key="item[keyId]"
      >
        {{item[keyName]}}
      </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue";
interface Data {
  currentValue: string | number
}
export default defineComponent({
  name: 'dropdown',
  props: {
    title: {
      type: String,
      default: 'dropdown'
    },
    keyId: {
      type: String,
      default: 'id'
    },
    keyName: {
      type: String,
      default: 'name'
    },
    listData: {
      type: Array,
      default: () => []
    }
  },
  emits: ['clickDropDown'],
  setup(props, ctx) {
    const data = reactive<Data>({
      currentValue: ''
    })
    ctx.emit('clickDropDown', '')
    function clickDropDown(val: any) {
      data.currentValue = val
      ctx.emit('clickDropDown', val)
    }
    return {
      data,
      clickDropDown
    }
  }
})
</script>
<style lang="scss" scoped>
.el-dropdown-menu__item.active {
  color: #66b1ff;
}
</style>